<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宝可得</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>欢迎页</h1>

<div>
    <h2>余额充值</h2>
    <label for="amount">充值金额:</label>
    <input type="number" id="amount" placeholder="请输入充值金额" min="0.01" step="0.01">
    <button id="rechargeBtn">充值</button>
</div>

<div id="orderInfo" style="display: none;">
    <h2>订单信息</h2>
    <div id="orderDetails"></div>
</div>

<script>
    $(document).ready(function() {
        // 检查URL中是否包含orderNo参数，如果有则查询订单信息
        const urlParams = new URLSearchParams(window.location.search);
        const orderNo = urlParams.get('orderNo');
        if (orderNo) {
            queryOrderInfo(orderNo);
        }

        $('#rechargeBtn').click(function() {
            var amount = $('#amount').val();

            if (!amount || amount <= 0) {
                alert('请输入有效的充值金额');
                return;
            }

            // 发送充值请求到后端创建订单
            $.ajax({
                url: '/chargeOrder/add/' + amount,
                method: 'POST',
                headers: {
                    'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjEsInR5cGUiOiJ1c2VyIn0sImV4cCI6MTc4NjUyODc1NX0.QjnaCRFAfxJSLvNuTKtxgFSy68qZGqfsy9ZMF9geoPo'
                },
                success: function(response) {
                    console.log('完整响应数据:', response);

                    // 检查响应是否成功并包含数据
                    if (response && response.code === 0 && response.data) {
                        // 获取后端返回的订单号（现在已经是字符串格式）
                        var orderNo = response.data.orderNo;
                        console.log('处理后的订单号: ' + orderNo);
                        console.log('订单号长度: ' + orderNo.length);

                        // 检查订单号是否有效
                        if (orderNo && orderNo !== '0') {
                            // 在当前窗口中打开支付宝支付页面
                            window.location.href = '/alipay/chargePay?orderNo=' + orderNo;

                        } else {
                            alert('创建订单失败，未获取到订单号');
                        }
                    } else {
                        alert('创建订单失败');
                    }
                },
                error: function(xhr, status, error) {
                    alert('创建订单失败: ' + error);
                }
            });
        });

        // 查询订单信息的函数
        function queryOrderInfo(orderNo) {
            // 检查订单号是否有效
            if (!orderNo) {
                return;
            }

            $.ajax({
                url: '/chargeOrder/find/' + orderNo,
                method: 'GET',
                headers: {
                    'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiaWQiOjExfSwiZXhwIjoxNzg0NzM1MzMxfQ.hY1CHeOzazl4xF_EltxVzl3vYrfnDVW31-lXbOafc70'
                },
                success: function(response) {
                    console.log('查询订单响应:', response);

                    // 检查响应是否成功并包含数据
                    if (response && response.code === 0 && response.data) {
                        // 显示订单信息
                        displayOrderInfo(response.data);
                    } else {
                        alert('查询订单失败');
                    }
                },
                error: function(xhr, status, error) {
                    alert('查询订单失败: ' + error);
                }
            });
        }

        // 显示订单信息的函数
        function displayOrderInfo(orderData) {
            console.log('显示的订单数据:', orderData);

            // 现在orderNo已经是字符串格式，无需转换
            var orderNo = orderData.orderNo;

            var orderHtml = '<ul>';
            orderHtml += '<li>用户名: ' + orderData.username + '</li>';
            orderHtml += '<li>订单号: ' + orderNo + '</li>';
            orderHtml += '<li>充值金额: ' + orderData.requestAmount + '</li>';
            orderHtml += '<li>状态: ' + (orderData.status === 0 ? '待支付' : '已支付') + '</li>';
            orderHtml += '<li>创建时间: ' + orderData.createdTime + '</li>';
            orderHtml += '</ul>';

            $('#orderDetails').html(orderHtml);
            $('#orderInfo').show();
        }
    });

</script>
</body>
</html>
